<template>
  <a-card class="gallery-body ax_plain_card" :body-style="{ paddingTop: '0', height: '100%' }">
    <a-tabs v-model:active-key="wallpaperTab">
      <a-tab-pane key="system" tab="系统壁纸">
        <template v-if="galleryData.length > 0">
          <ul class="grid grid-cols-3 gap-4 text-center p-[8px]">
            <li
              v-for="(item, key) in galleryData"
              :key="key"
              @click="selectItem(item)"
              class="relative"
            >
              <div class="selected" v-if="currentGallery === item">
                <CheckOutlined />
              </div>
              <AxImage
                :preview="false"
                :src="getImageByFullPath(item)"
                v-if="['image', 'cdn-image'].includes(galleryType)"
                :fallback="failurePng"
              />
            </li>
          </ul>
        </template>
      </a-tab-pane>

      <a-tab-pane key="cat" tab="小鸟壁纸">
        <CatWallpaper />
      </a-tab-pane>

      <a-tab-pane key="local" tab="本地壁纸">
        <a-card :body-style="{ position: 'relative' }">
          <a-upload-dragger
            @change="upload"
            :customRequest="() => false"
            :max-count="1"
            :file-list="fileList"
          >
            <div class="bg-image">
              <a-image :src="backgroundSrc"></a-image>
            </div>
            <div class="upload-info">
              <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
              </p>
              <p class="ant-upload-text">拖拽图片到此上传</p>
              <p class="ant-upload-hint">图片不限大小，但会占用计算机的存储空间</p>
            </div>
          </a-upload-dragger>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script setup lang="ts">
import { getImageByFullPath } from '@/api/utils/image';
import failurePng from '@/assets/failure.png';
import { LOCAL_FORAGE_ENUM } from '@/global/enum/common';
import { setBackground } from '@/store/page/utils';
import localforage from 'localforage';
import {
  changeGalleryType,
  currentGallery,
  galleryData,
  galleryType,
  setBase64Background,
  wallpaperTab,
} from './data/data';
import CatWallpaper from './cat-wallpaper/CatWallpaper.vue';

const fileList = ref([]);
const backgroundSrc = ref();

/* 点击预览 */
const selectItem = async (src: string) => {
  currentGallery.value = src;
  setBackground(src, galleryType.value);
};

/* 上传图片 */
const upload = async (config: any) => {
  setBase64Background(config.file.originFileObj);
};

/* 进入页面加载本地图片 */
onMounted(async () => {
  changeGalleryType();
  const data: any = await localforage.getItem(LOCAL_FORAGE_ENUM.BACKGROUND_SRC);
  backgroundSrc.value = data;
});

onUnmounted(() => {
  wallpaperTab.value = 'system';
  galleryType.value = 'image';
});
</script>

<style lang="scss" scoped>
@import './wallpaper.scss';
</style>
